<template>
  <div class="profile-container">
    <van-nav-bar title="个人中心" />
    
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-info">
        <van-image
          round
          width="64"
          height="64"
          :src="userInfo.avatar"
          @click="onEditAvatar"
        />
        <div class="info-content">
          <div class="username">{{ userInfo.nickname }}</div>
          <div class="user-id">ID: {{ userInfo.userId }}</div>
        </div>
      </div>
      <van-button size="small" plain hairline type="primary" @click="onEditProfile">编辑资料</van-button>
    </div>

    <!-- 我的订单 -->
    <div class="card-section">
      <div class="section-header" @click="onViewAllOrders">
        <span>我的订单</span>
        <span class="more">
          查看全部
          <van-icon name="arrow" />
        </span>
      </div>
      <van-grid :column-num="4" :border="false">
        <van-grid-item v-for="(item, index) in orderTypes" :key="index" :icon="item.icon" :text="item.text" @click="onOrderTypeClick(item)" />
      </van-grid>
    </div>

    <!-- 功能列表 -->
    <div class="menu-group">
      <van-cell-group inset title="学习中心">
        <van-cell title="我的收藏" icon="star-o" is-link to="/favorites" />
        <van-cell title="浏览历史" icon="clock-o" is-link to="/history" />
        <van-cell title="学习进度" icon="chart-trending-o" is-link to="/progress" />
      </van-cell-group>

      <van-cell-group inset title="客户服务">
        <van-cell title="在线客服" icon="service-o" is-link @click="onCustomerService" />
        <van-cell title="投诉建议" icon="warning-o" is-link to="/complaint" />
        <van-cell title="申请成为讲师" icon="manager-o" is-link to="/apply-teacher" />
        <van-cell title="设置" icon="setting-o" is-link to="/settings" />
      </van-cell-group>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-btn">
      <van-button round block type="danger" @click="handleLogout">退出登录</van-button>
    </div>
    <div style="height: 50px"></div>

    <!-- 头像编辑弹窗 -->
    <van-action-sheet v-model:show="showAvatarActions" :actions="avatarActions" cancel-text="取消" @select="onSelectAvatarAction" />

    <!-- 客服弹窗 -->
    <van-action-sheet v-model:show="showServiceActions" :actions="serviceActions" cancel-text="取消" @select="onSelectServiceAction" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'

const router = useRouter()

// 用户信息
const userInfo = ref({
  nickname: '张三',
  userId: '88888888',
  avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg'
})

// 订单类型
const orderTypes = [
  { icon: 'pending-payment', text: '待付款', type: 'unpaid' },
  { icon: 'todo-list-o', text: '待开课', type: 'unstarted' },
  { icon: 'play-circle-o', text: '学习中', type: 'learning' },
  { icon: 'certificate', text: '已完成', type: 'completed' }
]

// 头像编辑相关
const showAvatarActions = ref(false)
const avatarActions = [
  { name: '拍照', key: 'camera' },
  { name: '从相册选择', key: 'album' }
]

// 客服相关
const showServiceActions = ref(false)
const serviceActions = [
  { name: '在线咨询', key: 'online' },
  { name: '电话咨询', key: 'phone' }
]

// 编辑头像
const onEditAvatar = () => {
  showAvatarActions.value = true
}

const onSelectAvatarAction = (action) => {
  showAvatarActions.value = false
  if (action.key === 'camera') {
    // TODO: 调用相机
    showToast('打开相机')
  } else if (action.key === 'album') {
    // TODO: 打开相册
    showToast('打开相册')
  }
}

// 编辑资料
const onEditProfile = () => {
  router.push('/profile/edit')
}

// 订单相关
const onViewAllOrders = () => {
  router.push('/orders')
}

const onOrderTypeClick = (item) => {
  router.push({
    path: '/orders',
    query: { type: item.type }
  })
}

// 客服相关
const onCustomerService = () => {
  showServiceActions.value = true
}

const onSelectServiceAction = (action) => {
  showServiceActions.value = false
  if (action.key === 'online') {
    // TODO: 打开在线客服
    showToast('正在接入在线客服')
  } else if (action.key === 'phone') {
    showDialog({
      title: '客服电话',
      message: '400-888-8888',
      theme: 'round-button',
      confirmButtonText: '拨打',
      cancelButtonText: '取消'
    }).then(() => {
      window.location.href = 'tel:4008888888'
    })
  }
}

// 退出登录
const handleLogout = () => {
  showDialog({
    title: '提示',
    message: '确定要退出登录吗？',
    theme: 'round-button'
  }).then(() => {
    localStorage.removeItem('token')
    router.push('/login')
  })
}
</script>

<style lang="scss" scoped>
.profile-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 20px;

  .user-card {
    margin: 12px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-info {
      display: flex;
      align-items: center;

      .info-content {
        margin-left: 12px;

        .username {
          font-size: 18px;
          font-weight: bold;
          color: #323233;
          margin-bottom: 4px;
        }

        .user-id {
          font-size: 12px;
          color: #969799;
        }
      }
    }
  }

  .card-section {
    margin: 12px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 16px;
      font-size: 15px;
      font-weight: bold;

      .more {
        font-size: 12px;
        color: #969799;
        font-weight: normal;

        .van-icon {
          font-size: 12px;
        }
      }
    }

    .van-grid-item__content {
      padding: 16px 8px;
    }

    .van-grid-item__icon {
      font-size: 24px;
    }

    .van-grid-item__text {
      font-size: 12px;
      margin-top: 8px;
    }
  }

  .menu-group {
    margin-bottom: 20px;

    .van-cell-group__title {
      padding: 16px 16px 8px;
      font-size: 14px;
      color: #323233;
    }

    .van-cell {
      align-items: center;
      padding: 12px 16px;

      &__title {
        font-size: 14px;
      }

      .van-icon {
        font-size: 18px;
        margin-right: 8px;
      }
    }
  }

  .logout-btn {
    margin: 0 16px;
  }

  .menu-section {
    margin-bottom: 20px;

    .van-cell-group__title {
      padding: 16px 16px 8px;
      font-size: 14px;
      color: #323233;
    }

    .van-cell {
      align-items: center;
      padding: 12px 16px;

      &__title {
        font-size: 14px;
        color: #323233;
      }

      &__value {
        color: #969799;
        font-size: 13px;
      }

      &__right-icon {
        color: #969799;
      }
    }
  }

  .user-info {
    padding: 16px;
    background: #fff;
    margin-bottom: 12px;

    .van-cell {
      padding: 0;
      background-color: transparent;

      &__title {
        color: #323233;
        font-size: 14px;
        margin-bottom: 4px;
      }

      &__value {
        color: #969799;
        font-size: 12px;
      }
    }
  }
}
</style>
